<include file="public:header"/>
<!-- Page -->
<div class="page animsition">
    <div class="page-content padding-30 container-fluid">
        <div class="row" data-plugin="matchHeight" data-by-row="true">
            <!--左边-->
            <div class="col-md-3 col-md-12">
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">基本信息</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-hover">

                            <tbody>
                            <tr>
                                <td>云服务器名称</td>
                                <td>云服务器-{$list.instanceid}</td>
                            </tr>
                            <tr>
                                <td>状态</td>
                                <td>
                                    <if condition="$list.status eq 'Running'">
                                        <span class="label starts label-success">运行中</span>
                                    <elseif condition="$list.status eq 'Starting'"/>
                                        <span class="label starts label-success">启动中</span>
                                    <elseif condition="$list.status eq 'Stopping'"/>
                                        <span class="label starts label-success">停止中</span>
                                    <else />
                                        <span class="label starts label-success">已停止</span> 
                                    </if>   
                                </td>
                            </tr>
                            <tr>
                                <td>业务类型</td>
                                <td>存储</td>

                            </tr>
                            <tr>
                                <td>所在地区</td>
                                <td>{$list.diyuname}</td>
                            </tr>
                            <tr>
                                <td>注意</td>
                                <td><span style="color: #46be8a">“初次购买”与“重装系统” 系统初始化，需要5分钟左右方可远程链接.</span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!--配置信息-->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">配置信息</h3>
                        <div class="panel-actions">
                            <a class="panel-action icon wb-menu" data-toggle="dropdown" aria-hidden="true"></a>
                            <ul class="dropdown-menu bullet dropdown-menu-right" aria-labelledby="examplePanelDropdown" role="menu">
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem" class="btn-create"><i class="icon fa-shopping-cart" aria-hidden="true"></i> 购买</a></li>
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem" class="btn-renew " data-sn="qys-5bae3624ebdce4-10044907" data-tag="磁盘-20180928220940.9238"><i class="icon fa-mail-reply-all" aria-hidden="true"></i> 续费</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table class="table table-hover">

                            <tbody>
                            <tr>
                                <td>CPU</td>
                                <td>{$list.cpu}核</td>
                            </tr>
                            <tr>
                                <td>内存</td>
                                <td>{$list.memory}G</td>
                            </tr>
                            <tr>
                                <td>系统盘</td>
                                <td>{$list.xipannei}GB</td>
                            </tr>
                            <tr>
                                <td>数据盘</td>
                                <td>{$list.shujunei}GB</td>
                            </tr>
                            <tr>
                                <td>操作系统</td>
                                <td>{$list.areaimg.osname}</td>
                            </tr>
                            <tr>
                                <td>带宽</td>
                                <td>{$list.internetmaxbandwidthout}M</td>
                            </tr>
                            <tr>
                                <td>带宽计费方式</td>
                                <td>
                                    <if condition="$list.internetchargetype eq 'PayByBandwidth'">
                                      按固定带宽计费
                                    <else/>
                                      按使用流量计费
                                    </if>   
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!--计算开始-->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">计算信息</h3>
                        <div class="panel-actions">
                            <a class="panel-action icon wb-menu" data-toggle="dropdown" aria-hidden="true"></a>
                            <ul class="dropdown-menu bullet dropdown-menu-right" aria-labelledby="examplePanelDropdown" role="menu">
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem" class="btn-create"><i class="icon fa-shopping-cart" aria-hidden="true"></i> 购买</a></li>
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem" class="btn-renew " data-sn="qys-5bae3624ebdce4-10044907" data-tag="磁盘-20180928220940.9238"><i class="icon fa-mail-reply-all" aria-hidden="true"></i> 续费</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table class="table table-hover">

                            <tbody>
                            <tr>
                                <td>计费方式</td>
                                <td>
                                    <if condition="$list.jifei eq 'PrePaid'">
                                      包年包月
                                    <else/>
                                      按量付费
                                    </if>  
                                </td>
                            </tr>
                            <tr>
                                <td>开始时间</td>
                                <td>{$list.creationtime|date='Y-m-d H:i:s',###}</td>
                            </tr>
                            <tr>
                                <td>到期时间</td>
                                <td>{$list.stoptime}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--左边End-->
            <!--右边-->
            <div class="col-md-9 col-md-12">
                <div class="example-wrap">
                    <div class="nav-tabs-horizontal nav-tabs-inverse">
                        <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
<!--                             <li class="active" role="presentation">
                                <a data-toggle="tab" href="https://uc.yisu.com/index.php/storage/view.html?sn=qys-5bae3624ebdce4-10044907#exampleTabsSolidInverse1" aria-controls="exampleTabsSolidInverseOne" role="tab">
                                    监控
                                </a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" href="https://uc.yisu.com/index.php/storage/view.html?sn=qys-5bae3624ebdce4-10044907#exampleTabsSolidInverse2" aria-controls="exampleTabsSolidInverseTwo" role="tab">
                                    备份
                                </a>
                            </li> -->
                            <li role="presentation">
                                <a data-toggle="tab" href="https://uc.yisu.com/index.php/storage/view.html?sn=qys-5bae3624ebdce4-10044907#exampleTabsSolidInverse3" aria-controls="exampleTabsSolidInverseTwo" role="tab">
                                    操作日志
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="exampleTabsSolidInverse1" role="tabpanel">
                                <div class="row">
                                   <!--  <div class="btn-group pull-right margin-20" aria-label="Basic example" role="group">
                                        <button type="button" class="btn btn-outline btn-default  active">近6小时</button>
                                        <button type="button" class="btn btn-outline btn-default">近一天</button>
                                        <button type="button" class="btn btn-outline btn-default">近一周</button>
                                        <button type="button" class="btn btn-outline btn-default">近一月</button>
                                    </div> -->
                                </div>
                               

                            </div>
                            <div class="tab-pane" id="exampleTabsSolidInverse2" role="tabpanel">
                                标签2
                            </div>
                            <div class="tab-pane" id="exampleTabsSolidInverse3" role="tabpanel">
                                标签3
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右边End-->
        </div>
    </div>
</div>

<!-- End Page -->

<style>
    .btn-disabled{
        box-shadow:none;
        cursor:not-allowed;
        opacity:0.5;
        pointer-events:none;
    }
</style>
<!--弹窗-创建云盘-->
<div class="modal fade" id="createModel" aria-hidden="true" aria-labelledby="createModel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">购买磁盘</h4>
            </div>
            <div class="modal-body">
                <div class="example-grid">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="create_instance">挂载目标实例</label>
                                <div id="create_instance_box">
                                    <select id="create_instance" class="form-control">
                                        <option value="">请选择挂载目标</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="create_region">机房</label>
                                <input type="text" class="form-control" id="create_region" name="挂载目标实例" required="required" value="" readonly="true">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="crete_storage_type">硬盘类型</label>
                                <div id="crete_storagetype_box">
                                    <select id="crete_storage_type" data-plugin="selectpicker" class="form-control bs-select-hidden" disabled="">
                                        <option value="">请选择硬盘类型</option>
                                        <option value="normal">普通</option>
                                        <option value="high">高效型</option>
                                        <option value="ssd" selected="">SSD</option>
                                    </select><div class="btn-group bootstrap-select disabled form-control"><button type="button" class="btn dropdown-toggle disabled btn-default" data-toggle="dropdown" data-id="crete_storage_type" tabindex="-1" title="SSD"><span class="filter-option pull-left">SSD</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">请选择硬盘类型</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">普通</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">高效型</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">SSD</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="create_number">个数</label>
                                <input type="text" class="form-control" id="create_number" name="数量" required="required" value="1" placeholder="最多可开通4块云盘">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="create_size">容量（GB）</label>
                                <input type="text" class="form-control" id="create_size" name="容量" required="required" value="" placeholder="容量范围：5 - 2000">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="create_month">时长</label>
                                <select id="create_month" data-plugin="selectpicker" class="form-control bs-select-hidden">
                                    <option value="1" selected="">1个月</option>
                                    <option value="2">2个月</option>
                                    <option value="3">3个月</option>
                                    <option value="6">半年</option>
                                    <option value="12">1年</option>
                                    <option value="24">2年</option>
                                    <option value="36">3年</option>
                                </select><div class="btn-group bootstrap-select form-control"><button type="button" class="btn dropdown-toggle btn-select" data-toggle="dropdown" data-id="create_month" title="1个月"><span class="filter-option pull-left">1个月</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1个月</span><span class="icon wb-check check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2个月</span><span class="icon wb-check check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">3个月</span><span class="icon wb-check check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">半年</span><span class="icon wb-check check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1年</span><span class="icon wb-check check-mark"></span></a></li><li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2年</span><span class="icon wb-check check-mark"></span></a></li><li data-original-index="6"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">3年</span><span class="icon wb-check check-mark"></span></a></li></ul></div></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label" for="create_price">费用（￥）</label>
                                <input type="text" class="form-control" id="create_price" name="价格" required="required" value="0" readonly="true">
                            </div>
                        </div>
                    </div>
                     <div style="margin-top:12px;">帐户余额：<span class="text-success" id="create_account">0.0</span></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="create-submit">提交</button>
            </div>
        </div>
    </div>
</div>
<!--创建云盘弹窗 End-->

<!--弹窗-挂载-->
<div class="modal fade" id="loadModel" aria-hidden="true" aria-labelledby="loadModel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center">
        <div class="modal-content" style="800 px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">将磁盘加载到云服务器</h4>
            </div>
            <div class="modal-body">
                <div class="example-grid">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="inputUserName">磁盘对象</label>
                                <input type="text" class="form-control" id="mount-name" name="状态" required="required" value="" readonly="true">
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="inputUserName">加载目标实例</label>
                                <select class="form-control" id="mount-ins">
                                    <option value="">实例1</option>
                                    <option value="">实例2</option>
                                    <option value="">实例3</option>
                                    <option value="">实例4</option>
                                    <option value="">实例5</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="display:none;">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="inputUserName">磁盘是否随实例释放</label>
                                <select data-plugin="selectpicker" class="form-control bs-select-hidden" id="mount-follow">
                                    <option value="1">是</option>
                                    <option value="2" selected="">否</option>
                                </select><div class="btn-group bootstrap-select form-control"><button type="button" class="btn dropdown-toggle btn-select" data-toggle="dropdown" data-id="mount-follow" title="否"><span class="filter-option pull-left">否</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">是</span><span class="icon wb-check check-mark"></span></a></li><li data-original-index="1" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">否</span><span class="icon wb-check check-mark"></span></a></li></ul></div></div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="inputUserName">状态</label>
                                <input type="text" class="form-control" id="inputUserName" name="状态" required="required" value="（已挂载？？？）" readonly="true">
                            </div>
                        </div>

                    </div>-->
                </div>
            </div>
            <div class="modal-footer" id="mount-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="mount-submit">确认</button>
            </div>
        </div>
    </div>
</div>
<!--挂载弹窗 End-->

<!--弹窗-卸载-->
<div class="modal fade" id="unmountModel" aria-hidden="true" aria-labelledby="unmountModel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center">
        <div class="modal-content" style="800 px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">从云服务器卸载磁盘</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <h4>
                        您确认将对 <span class="text-danger" id="unmount-name">磁盘</span> 执行卸载操作？
                    </h4>
                </div>
                <div class="form-group">
                    <div class="checkbox-custom checkbox-default">
                        <input type="checkbox" id="inputBasicRemember" name="inputCheckbox" checked="" autocomplete="off">
                        <label for="inputBasicRemember">卸载之后，该磁盘将<a class="" data-toggle="tooltip" data-placement="right" data-trigger="click" data-original-title="卸载磁盘"> 无法正常提供服务 </a>，请您做好准备，以免造成影响</label>
                    </div>

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="unmount-submit">确认</button>
            </div>
        </div>
    </div>
</div>
<!--卸载弹窗 End-->

<!--弹窗-快照-->
<div class="modal fade" id="snapshotModel" aria-hidden="true" aria-labelledby="snapshotModel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center" style="width:620px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">创建快照</h4>
                <a href="javascript:;" class="problem_tips">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tishiwenhao"></use>
                    </svg>
                    <div class="head_tips">
                        <div>提示气泡信息，这是一条提示信息，最长400px。云服务器（Cloud Virtual Machine，CVM）为您提供安全可靠的弹性计算服务。 只需几分钟，您就可以在云端获取和启用 CVM，来实现您的计算需求。随着业务需求的变化，您可以实时扩展或缩减计算资源。
                            CVM 支持按实际使用的资源计费，可以为您节约计算成本。使用 CVM 可以极大降低您的软硬件采购成本，简化 IT 运维工作。
                        </div>
                    </div>
                    <span>如何创建快照</span>
                </a>

            </div>
            <div class="modal-body create_body">
                <div class="body_tips">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinggao-qipaotishi-grey"></use>
                    </svg>
                    为了保证快照创建成功，正在创建快照时，您不能修改ECS实例状态，比如停止或重启ECS实例。请耐心等待。
                </div>
                <ul>
                    <li><div class="msg_title">磁盘ID:</div><div id="snapshot-storname">D-8vbdzduw5p6hed6nl9o</div></li>
                    <li>
                        <div class="msg_title">IP地址:</div>
                        <div class="ip_box">
                            <span id="snapshot-ip">192.168.0.1</span>
                            <div class="ip_tips">
                                <div>
                                    <ul>
                                        <li>名 称：<span id="snapshot-instag">网站服务器</span></li>
                                        <li>机 房：<span id="snapshot-region">香港一区</span></li>
                                        <li>系 统：<span id="snapshot-sysimg">Centos 7.2 64位</span></li>
                                        <li>时 效：<span id="snapshot-dur">2018-1-1 至 2018-10-1</span></li>
                                        <li><a href="javascript:;">更多</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><div class="msg_title">磁盘属性:</div><div id="snapshot-storattr">高效云盘</div></li>
                </ul>
                <div class="create_name">
                    <div><span>*</span>快照名称:</div>
                    <input type="text" id="snapshot-name" placeholder="快照名称为2-128个字符，快照明不能以auto开头">
                    <div class="bubble">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jinggao-qipaotishi-white"></use>
                        </svg>
                        长度为2-128个字符，不能以特殊字符、数字及“auto”开头，只可包含特殊字符中的”. _ - ; ”
                    </div>
                </div>
                <!--<div class="select_box clearfix">
                    <span>标签：</span>
                    <div class="form-group">
                        <div class="btn-group bootstrap-select">
                            <button type="button" class="btn dropdown-toggle btn-select" data-toggle="dropdown" data-id="picker" title="快照名称" aria-expanded="false">
                                <span class="filter-option pull-left">请选择已有标签键或输入新键</span>&nbsp;<span class="bs-caret"><span class="caret"></span>
                            </span>
                            </button>
                            <div class="dropdown-menu open" style="max-height: 412px; overflow: hidden; min-height: 131px;">
                                <ul class="dropdown-menu inner" role="menu" style="max-height: 400px; overflow-y: auto; min-height: 119px;">
                                    <li data-original-index="0" class="selected">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">请选择已有标签键或输入新键</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                    <li data-original-index="1">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">云服务器ECS</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                    <li data-original-index="2">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">云服务器ECS</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                    <li data-original-index="3">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">云服务器ECS</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                    <li data-original-index="4">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">云服务器ECS</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="btn-group bootstrap-select">
                            <button type="button" class="btn dropdown-toggle btn-select" data-toggle="dropdown" data-id="picker" title="快照名称" aria-expanded="false">
                                <span class="filter-option pull-left">请选择已有标签值或输入新值</span>&nbsp;<span class="bs-caret"><span class="caret"></span>
                            </span>
                            </button>
                            <div class="dropdown-menu open" style="max-height: 412px; overflow: hidden; min-height: 131px;">
                                <ul class="dropdown-menu inner" role="menu" style="max-height: 400px; overflow-y: auto; min-height: 119px;">
                                    <li data-original-index="0" class="selected">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">快照名称</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                    <li data-original-index="1">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">云服务器ECS</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                    <li data-original-index="2">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">云服务器ECS</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                    <li data-original-index="3">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">云服务器ECS</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                    <li data-original-index="4">
                                        <a tabindex="0" class="" style="" data-tokens="null">
                                            <span class="text">云服务器ECS</span><span class="icon wb-check check-mark"></span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger" id="snapshot-submit">确认</button>
            </div>
        </div>
    </div>
</div>
<!--快照弹窗 End-->

<div class="modal fade" id="messageModel" aria-hidden="true" aria-labelledby="messageModel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center">
        <div class="modal-content" style="800 px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">提醒</h4>
            </div>
            <div class="modal-body">
                <div class="form-group" id="msg-box" style="font-size:18px;text-align: center">
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>

<!--扩容弹窗 -->
<div class="modal fade" id="expanModel" aria-hidden="true" aria-labelledby="expanModel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">磁盘扩容</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <h4>
                        扩容对象：<span class="text-danger" id="expansion-name"></span>
                    </h4>

                </div>

                <table class="table table-border">
                    <tbody><tr>
                        <td>扩容后容量：</td>
                        <td>
                            <!--<input type="text" value="0" id="expan-size" class="form-control" style="width:200px"> GB-->
                            <!--<div class="spinnerUi" tabindex="0">
                                <input type="text" value="0" data-plugin="asSpinner" class="form-control" id="expan-size"> <span style="font-size:15px">GB</span>
                            </div>-->
                            <div class="num-con good-num-ct">
                                <div class="lc"><input id="expan-size" value="0" type="text"><span>G</span></div>
                                <div class="rc"><span class="btn jian"></span><span class="btn jia"></span></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>所需金额：</td>
                        <td>
                            <span class="text-danger" id="expan-money">0.00</span>
                        </td>
                    </tr>
                    <tr>
                        <td>帐户余额：</td>
                        <td>
                            <span class="text-success" id="expan-acount-money">0.00</span>
                        </td>
                    </tr>
                </tbody></table>


                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="expan-submit">提交订单</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--扩容弹窗 End-->

<!--续费弹窗 -->
<div class="modal fade" id="renewModel" aria-hidden="true" aria-labelledby="renewModel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">磁盘续费</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <h4>
                        续费对象：<span class="text-danger" id="renew-name"></span>
                    </h4>
                </div>

                <table class="table table-border">
                    <tbody><tr>
                        <td style="width:100px;"><label class="control-label" for="charge-cycle">时长：</label></td>
                        <td>
                            <!--<select id="charge-cycle" class="form-control" style="width:80px;"></select>-->
                            <div class="btn-group btn-group-sm" aria-label="Small button group" role="group" id="charge-cycle">
                                <button type="button" class="btn btn-outline btn-primary renewmouth" value="1">1个月</button>
                                <button type="button" class="btn btn-outline btn-primary renewmouth" value="2">2个月</button>
                                <button type="button" class="btn btn-outline btn-primary renewmouth" value="3">3个月</button>
                                <button type="button" class="btn btn-outline btn-primary renewmouth" value="6">半年</button>
                                <button type="button" class="btn btn-outline btn-primary renewmouth active" value="12">1年</button>
                                <button type="button" class="btn btn-outline btn-primary renewmouth" value="24">2年</button>
                                <button type="button" class="btn btn-outline btn-primary renewmouth" value="36">3年</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>所需金额：</td>
                        <td>
                            <span class="text-danger" id="renew-money">0.00</span>
                        </td>
                    </tr>
                    <tr>
                        <td>帐户余额：</td>
                        <td>
                            <span class="text-success" id="renew-acount-money">0.00</span>
                        </td>
                    </tr>
                </tbody></table>


                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="renew-submit">提交订单</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--续费弹窗 End-->

<!--描述弹窗 -->
<div class="modal fade" id="describeModel" aria-hidden="true" aria-labelledby="describeModel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center">
        <div class="modal-content" style="800 px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">修改磁盘描述</h4>
            </div>
            <div class="modal-body">
                <!-- Example Panel Tables -->
                <div class="panel">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><span class="text-danger">*</span> 磁盘名称：</td>
                            <td><input type="text" class="form-control" id="desc-name" required="required" placeholder=""><br>长度限制为6-30个字符，以大小写字母或中文开头，可包含数字，"."，"_"或"-" </td>
                        </tr>
                        <tr>
                            <td><span class="text-danger">*</span> 磁盘描述：</td>
                            <td><input type="text" class="form-control" id="desc-desc" required="required"><br>最多可以输入200个字符，不能以http://或https://开头</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!-- End Example Panel Tables -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger" id="desc-submit">确认</button>
            </div>
        </div>
    </div>
</div>
<!--描述弹窗 End-->

<!--删除弹窗 -->
<div class="modal fade" id="delModel" aria-hidden="true" aria-labelledby="delModel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center">
        <div class="modal-content" style="800 px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">删除磁盘</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <h4>
                        您确定要删除该磁盘？ <span class="text-danger" id="del-name"></span> <br>
                        <!--<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right"  data-trigger="click" id="del-send">点击发送手机验证码</a>-->
                    </h4>
                </div>

                <!--<div class="col-md-4 form-group"><input type="text" class="form-control" placeholder="请填写验证码" id="del-code"></div>-->
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="del-submit">确认</button>
            </div>
        </div>
    </div>
</div>
<!--删除弹窗 End-->
<inclde file="public:footer"/>

